<template>
  <div>
    <el-card>
      <template #header>表单</template>
      <common-form
        :form-infos="formInfos"
        :form-attrs="{ 'label-width': 'auto', size: 'small' }"
        @submit="onSubmit"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, shallowReactive } from "vue";

export default defineComponent({
  name: "Home",
  setup() {
    const formInfos = shallowReactive([
      {
        id: 0,
        name: "CommonEditor",
        prop: "editor",
        value: "",
        formItemAttrs: {
          label: "富文本",
        },
      },
      {
        id: 1,
        name: "CommonInput",
        prop: "username",
        value: "",
        rule: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
        ],
        formItemAttrs: {
          label: "文本框",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入用户名",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "password",
        value: "",
        rule: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        formItemAttrs: {
          label: "密码框",
        },
        inputAttrs: {
          type: "password",
          placeholder: "请输入密码",
        },
      },
      {
        id: 3,
        name: "CommonInput",
        prop: "textarea",
        value: "",
        rule: [
          { required: true, message: "请输入内容", trigger: "blur" },
          {
            min: 0,
            max: 200,
            message: "长度在 0 到 200 个字符",
            trigger: "blur",
          },
        ],
        formItemAttrs: {
          label: "多行文本",
        },
        inputAttrs: {
          type: "textarea",
        },
      },
      {
        id: 4,
        name: "CommonRadio",
        prop: "sex",
        value: "1",
        options: {
          "1": "男",
          "2": "女",
          "3": "保密",
        },
        formItemAttrs: {
          label: "单选框",
        },
        inputAttrs: {},
        subAttrs: {},
      },
      {
        id: 5,
        name: "CommonCheckbox",
        prop: "hobby",
        value: [],
        checkList: ["抽烟", "喝酒", "打牌", "烫头"],
        formItemAttrs: {
          label: "多选框",
        },
        inputAttrs: {},
        subAttrs: {},
      },
      {
        id: 6,
        name: "CommonInputNumber",
        prop: "num",
        value: 1,
        unit: '单位',
        formItemAttrs: {
          label: "计数器",
        },
        inputAttrs: {
          min: 1,
          max: 10,
        },
      },
      {
        id: 7,
        name: "CommonSelect",
        prop: "fruit",
        value: "",
        options: {
          "1": "apple",
          "2": "banana",
          "3": "orange",
        },
        formItemAttrs: {
          label: "选择器",
        },
        inputAttrs: {
          placeholder: "请选择",
        },
      },
      {
        id: 8,
        name: "CommonSelectGroup",
        prop: "city",
        value: '',
        options: [
          {
            label: '热门城市',
            options: [
              {
                value: 'Shanghai',
                label: '上海',
              },
              {
                value: 'Beijing',
                label: '北京',
              },
            ],
          },
          {
            label: '城市名',
            options: [
              {
                value: 'Chengdu',
                label: '成都',
              },
              {
                value: 'Shenzhen',
                label: '深圳',
              },
              {
                value: 'Guangzhou',
                label: '广州',
              },
              {
                value: 'Dalian',
                label: '大连',
              },
            ],
          },
        ],
        formItemAttrs: {
          label: "上级分类",
        },
        inputAttrs: {
          placeholder: "请选择"
        },
      },
      {
        id: 9,
        name: "CommonCascader",
        prop: "menu",
        value: [],
        options: [
          {
            value: "1",
            label: "一级",
            children: [
              {
                value: "1-1",
                label: "二级",
                children: [
                  {
                    value: "1-1-1",
                    label: "三级",
                  },
                  {
                    value: "1-1-2",
                    label: "三级",
                  },
                  {
                    value: "1-1-3",
                    label: "三级",
                  },
                ],
              },
              {
                value: "1-2",
                label: "二级",
              },
              {
                value: "1-3",
                label: "二级",
              },
            ],
          },
          {
            value: "2",
            label: "一级",
          },
          {
            value: "3",
            label: "一级",
          },
        ],
        formItemAttrs: {
          label: "级联选择器",
        },
        inputAttrs: {
          placeholder: "请选择",
          props: { expandTrigger: "hover" },
        },
      },
      {
        id: 10,
        name: "CommonSwitch",
        prop: "switch",
        value: true,
        formItemAttrs: {
          label: "开关",
        },
        inputAttrs: {
          "active-color": "#13ce66",
          "inactive-color": "#ff4949",
        },
      },
      {
        id: 11,
        name: "CommonSlider",
        prop: "slider",
        value: 0,
        formItemAttrs: {
          label: "滑块",
        },
        inputAttrs: {
          step: 10,
        },
      },
      {
        id: 12,
        name: "CommonTimePicker",
        prop: "timePicker",
        value: new Date(),
        formItemAttrs: {
          label: "时间选择器",
        },
        inputAttrs: {
          placeholder: "请选择时间",
          "arrow-control": true,
        },
      },
      {
        id: 13,
        name: "CommonTimeSelect",
        prop: "timeSelect",
        value: "",
        formItemAttrs: {
          label: "时间选择器",
        },
        inputAttrs: {
          start: "08:30",
          step: "00:15",
          end: "18:30",
          placeholder: "选择时间",
        },
      },
      {
        id: 14,
        name: "CommonDatePicker",
        prop: "datePicker",
        value: "",
        formItemAttrs: {
          label: "日期时间选择器",
        },
        inputAttrs: {
          type: "datetime",
          placeholder: "选择日期",
        },
      },
      {
        id: 15,
        name: "CommonRate",
        prop: "rate",
        value: null,
        formItemAttrs: {
          label: "评分",
        },
        inputAttrs: {},
      },
      {
        id: 16,
        name: "CommonColorPicker",
        prop: "color",
        value: "#ffffff",
        formItemAttrs: {
          label: "颜色选择器",
        },
        inputAttrs: {},
      },
      {
        id: 17,
        name: "CommonTransfer",
        prop: "transfer",
        value: [],
        options: [
          {
            key: 1,
            label: "备选项1",
          },
          {
            key: 2,
            label: "备选项2",
          },
          {
            key: 3,
            label: "备选项3",
          },
          {
            key: 4,
            label: "备选项4",
            disabled: true,
          },
        ],
        formItemAttrs: {
          label: "穿梭框",
        },
        inputAttrs: {
          filterable: true,
        },
      },
      {
        id: 18,
        name: "CommonUpload",
        prop: "upload",
        value: [],
        formItemAttrs: {
          label: "上传",
        }
      },
    ]);

    const onSubmit = (data: any) => {
      console.log(data);
    };

    return {
      formInfos,
      onSubmit,
    };
  },
});
</script>
